<template>
  <div class="real-name-comp">
    <div class="title-content">
      <p class="title">劳务实名</p>
    </div>
    <main>
      <div class="list">
        <el-table
          :data="tableData"
          row-key="name"
          fit
          :max-height="$setRem(300)"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column label="项目" class-name="cell-custom">
            <template slot-scope="scope">
              <span class="project-name" :title="scope.row.name">
                {{ scope.row.name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            class-name="cell-custom"
            label="实名制"
            :width="$setRem(80)"
          >
            <template slot-scope="scope">
              <span class="project-text" :title="scope.row.nameNum">
                {{ scope.row.nameNum }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            class-name="cell-custom"
            label="在场人数"
            :width="$setRem(80)"
          >
            <template slot-scope="scope">
              <span class="project-text" :title="scope.row.num">
                {{ scope.row.num }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            class-name="cell-custom"
            label="出勤率"
            :width="$setRem(70)"
          >
            <template slot-scope="scope">
              <span class="project-text" :title="scope.row.unit">
                {{ scope.row.unit }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "realNameComp",
  data() {
    return {
      tableData: [
        {
          name: "余政储（2018）36号地块建设项目1",
          nameNum: 500,
          num: 400,
          unit: "80%"
        },
        {
          name: "余政储（2018）36号地块建设项目2",
          nameNum: 500,
          num: 400,
          unit: "80%"
        },
        {
          name: "余政储（2018）36号地块建设项目3",
          nameNum: 500,
          num: 400,
          unit: "80%"
        },
        {
          name: "余政储（2018）36号地块建设项目4",
          nameNum: 500,
          num: 400,
          unit: "80%"
        }
      ]
    };
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/table";

.real-name-comp {
  width: 100%;
  overflow: hidden;
  .title-content {
    height: 30px;
    overflow: hidden;
  }
  .title-content {
    height: 30px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .title {
    width: calc(100% - 10px);
    background: linear-gradient(to right, #18235f, #414d96);
    padding: 5px 15px;
    font-size: 15px;
    border-radius: 10px 13px 0 10px;
    margin-bottom: 20px;
    color: $mainColor;
    position: relative;
    &:after {
      content: "";
      position: absolute;
      right: -14px;
      top: 11px;
      width: 0;
      height: 0;
      border-width: 5px 16px;
      border-style: solid;
      border-color: #414d96 #414d96 transparent transparent;
      border-radius: 15px 6px 0 0;
      z-index: 1;
      transform: rotate(65deg);
    }
  }
  main {
    width: 100%;
    height: 260px;
    padding-bottom: 20px;
    overflow: hidden;
    border-radius: 5px;
    background-color: $mainBg;
    .list {
      /*width: 100%;*/
      height: 260px;
      overflow: auto;
      /* .project-name {
          max-width: 130px;
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }*/
      /deep/ .el-table {
        height: 100%;
        .el-table__body-wrapper {
          height: calc(100% - 40px);
        }
        .cell-custom {
          font-size: 14px;
        }
        .cell {
          line-height: 18px;
        }
      }
      .project-text {
        font-weight: bold;
      }
      /deep/ .el-table {
        .cell {
          line-height: 18px;
        }
      }
    }
  }
}

@media screen and (min-width: 1800px) {
  @media screen and (max-height: 1000px) {
    .real-name-comp main {
      height: 200px;
      .list {
        height: 200px;
      }
    }
  }
  @media screen and (max-height: 950px) {
    .real-name-comp main {
      height: 180px;
      .list {
        height: 180px;
      }
    }
  }
}
</style>
